<template>
    <div class="fillcontain">
        <head-top></head-top>
        <el-form :model="formData"  inline="true" ref="formData" labelWidth="120px"
                 class="demo-form-inline" style="margin-left: 20px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="类别名称">
                        <el-input
                            size="mini"
                            placeholder="类别名称"
                            v-model="formData.name">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属类型">
                        <el-select size="mini" v-model="formData.type" placeholder="所属类型">
                            <el-option
                                v-for="item in chargeTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :offset="6">
                    <el-button type="primary" icon="el-icon-search" @click="submitForm('add')">提交</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="id"
                    label="序号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="类别名称"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="type"
                    label="收支类型"
                    :formatter="formatType"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="teachers"
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="deleteType(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="10"
                    :total="count"
                    layout="total, prev, pager, next"
                    >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import {addBalanceType, deleteBalanceType, queryBalanceType, updateBalanceType} from '@/api/getData'
    import ElCol from "element-ui/packages/col/src/col";

    export default {
        components: {ElCol},
        data() {
            return {
                tableData:[],
                updatedata:{
                    type:'',
                    name:'',
                },
                value: '',
                formData: {
                        type: 1,
                        name: '',
                },
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,

            }
        }
        ,
        mounted() {
            this.initData();
        }
        ,
        methods: {
            formatType(row, column, cellValue){
                if(row.type==1)
                     return '收入'
                else
                    return '支出'
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                    this.currentPage = val;
                    this.initData()
            },
            async initData() {
                const v = await queryBalanceType({"data":{"pageno":this.currentPage,"pagesize":this.limit}});
                this.tableData = [];
                var list=v.data.values;
                this.count=v.data.totalCount;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.name = item.name;
                    tableData.type = item.type;
                    this.tableData.push(tableData);
                })
            },
            async deleteType(a,row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.confirmdelete(row);
                });


            },
            async confirmdelete(row) {
                var data={"data":{"id":row.id}}
               await deleteBalanceType(data)
                this.initData();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            },


            async updateBalanceType(row) {
                await updateBalanceType(row.id);
                this.$message({
                    type: 'success',
                    message: '修改成功'
                });
            },
            async editBalanceType(row) {
                this.updatedata.name = row.name;
                this.updatedata.type = row.type;
                dialogFormVisible = true;
            },
            async submitForm(formName) {
                try {
                   var data={"data":this.formData}
                   // alert( JSON.stringify(data))
                    let result = await addBalanceType(data);
                    if (result.success == true) {
                        this.initData();
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.formData = {
                            type: 1,
                            name: '',
                        }
                    }
                } catch (err) {
                    console.log(err);
                }
            }
        }
        ,
        computed: {
            ...
                mapGetters(['schoolList', 'chargeTypeList'])
        }
        ,
    }

</script>
<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
    .editbutton {
        padding-top: 3px;
        padding-right: 5px;
        padding-bottom: 3px;
        padding-left: 5px;
    }
</style>
